<template>
	<main-content>
		<view class="content-color">
			<view class="">
				<template v-for="(group,groupI) in viewConfig" :key="groupI">
					<view>
						<view class="p-16">
							<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						{{groupArr[groupI]}}</group-title>
						</view>
						<view class="view-group">
							<view class="view-item p-x-16 p-y-12 flex flex-row justify-between items-center"
								style="border-bottom: 1rpx solid rgba(231, 230, 228, 1);"
								v-for='(item,i) in group.filter(e=>!e.hide)' :key="i">
								<view class="list-title">
									{{item.label}}
								</view>
								<view class="" v-if="item.dataIndex=='complaintMediaList'">
									<view class=""
										v-for="imgSrc in item.customRender({formData,text:formData[item.dataIndex]})"
										:key="imgSrc">
										<u-image :src="imgUrl[imgSrc]" width="50px" height="50px"></u-image>
									</view>
								</view>
								<view class="" v-else>
									{{
										item?.customRender ? item.customRender({formData,text:formData[item.dataIndex]}) : formData[item.dataIndex]
									}}
									<u-icon v-if="item.copy" name="copy-fill" custom-prefix="custom-icon"
										:color="maiColor" class="p-l-2" @tap.stop="copy(formData[item.dataIndex])" />
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="">
				<view class="p-16">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						交易信息</group-title>
				</view>
				<view class="">
					<orderList :rowData="propsData" />
				</view>
			</view>
			<view class="">
				<view class="p-16">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						协商历史</group-title>
				</view>
				<view class="">
					<wechatHistory :rowData="propsData" />
				</view>
			</view>
		</view>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		computed,
		nextTick,
		h
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		ISENABLED,
		COMPLAINT_STATUS, //投诉状态
		COMPLAINT_SOURCE, //投诉来源
		COMPLAINT_PROBLEM_TYPE, //问题类型
		ZZB_CHANNEL_TYPE
	} from '@/common/dict.js'
	import {
		selectDictLabel,
		parseTime,
		copy,
		formatToMoney,
		strToArr
	} from '@/common/common.js'
	import {
		complaintApi
	} from '@/pages-menus/common/api/complaint/index.js'

	import orderList from './components/order-list.vue'
	import wechatHistory from './components/wechat-history.vue'

	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})
	const initForm = {
		area: undefined, //城市，所属区/县
		no: undefined, //门店账号
		logoImgUrl: undefined, //门店Logo地址
		agentId: undefined, //所属代理商编号
		agentInfo: undefined, //代理商出参
		exhibitionId: undefined, //所属展业人员编号
		remark: undefined, //备注
		cTime: undefined, //创建时间/入网时间
		type: undefined, //门店类型(0:直营;1:加盟)
		storeAbbrName: undefined, //门店简称
		cUserId: undefined, //创建用户编号
		areaCode: undefined, //城市，所属区/县CODE
		uUserId: undefined, //更新用户编号
		areaName: undefined, //城市，所属区/县CODE
		merchantId: undefined, //所属商户编号
		phone: undefined, //电话
		cUserName: undefined, //创建人
		uUserName: undefined, //更新人
		name: undefined, //名字
		storeName: undefined, //门店名称
		uTime: undefined, //更新时间
		id: undefined, //门店编号
		addr: undefined, //地址
		status: undefined, //门店状态(0:禁用;1:启用)
	}
	const formData = ref({
		...initForm
	})

	const groupArr = ['基本信息', '投诉内容']
	const viewConfig = ref([
		[{
				label: '投诉订单号',
				dataIndex: 'complaintNo',
			},
			{
				label: '商户名称',
				dataIndex: 'merchantName',
			},
			{
				label: '门店名称',
				dataIndex: 'storeName',
			},
			{
				label: '交易金额',
				dataIndex: 'amount',
				customRender: (data) => formatToMoney(data.amount / 100),
			},
			{
				label: '退款金额',
				dataIndex: 'applyRefundAmount',
				customRender: (data) => formatToMoney(data.applyRefundAmount / 100),
			},
			{
				label: '投诉时间',
				dataIndex: 'complaintTime',
				customRender: (data) => parseTime(data.text),
			},
			{
				label: '投诉完结时间',
				dataIndex: 'doTime',
				customRender: (data) => parseTime(data.text),
			},
			{
				label: '投诉单是否已全额退款',
				dataIndex: 'complaintFullRefunded',
				customRender: (data) => (data.complaintFullRefunded ? '是' : '否'),
			},
			{
				label: '是否有待回复的用户留言',
				dataIndex: 'incomingUserResponse',
				customRender: (data) => (data.incomingUserResponse ? '是' : '否'),
			},
			{
				label: '用户投诉次数',
				dataIndex: 'userComplaintTimes',
			},
			{
				label: '是否在平台协助中',
				dataIndex: 'inPlatformService',
				customRender: (data) => (data.inPlatformService ? '是' : '否'),
			},
			{
				label: '是否需即时服务用户',
				dataIndex: 'needImmediateService',
				customRender: (data) => (data.needImmediateService ? '是' : '否'),
			},
			{
				label: '通道类型',
				dataIndex: 'channelTypes',
				customRender: () => {
					return selectDictLabel(ZZB_CHANNEL_TYPE, propsData
						?.channelTypes)
				},
			},
			{
				label: '投诉来源',
				dataIndex: 'source',
				customRender: (data) => selectDictLabel(COMPLAINT_SOURCE, propsData?.source),
			},
			{
				label: '投诉状态',
				dataIndex: 'complaintState',
				customRender: (data) => selectDictLabel(COMPLAINT_STATUS, data.text),
			},
		],
		[{
				label: '用户联系方式',
				dataIndex: 'payerPhone',
			},
			{
				label: '投诉人OpenID',
				dataIndex: 'payerOpenid',
			},
			{
				label: '问题类型',
				dataIndex: 'problemType',
				customRender: (data) => selectDictLabel(COMPLAINT_PROBLEM_TYPE, data.text),
			},
			{
				label: '申请退款金额',
				dataIndex: 'applyRefundAmount',
				customRender: (data) => formatToMoney(data.text / 100),
			},
			{
				label: '用户标签列表',
				dataIndex: 'userTagList',
				customRender: ({
					formData
				}) => {
					let arr = strToArr(formData.userTagList)
					return arr.map((item) => selectDictLabel(COMPLAINT_USER_TAG, item)).toString()
				},
			},
			{
				label: '投诉诉求',
				dataIndex: 'problemDescription',
			},
			{
				label: '投诉内容',
				dataIndex: 'complaintDetail',
			},
			{
				label: '投诉图片',
				dataIndex: 'complaintMediaList',
				customRender: ({
					formData
				}) => {
					if (formData?.complaintMediaList?.length == 0) return
					let urlItem = []
					let arr = formData.complaintMediaList?.map((item) => {
						let urlArr = item.mediaUrl
						urlArr.forEach((element) => {
							getUrl(element)
							urlItem.push(element)
						})
					})
					return urlItem
				},
			},
		]
	])

	const queryData = ref({})
	const getForm = () => {
		complaintApi.wechatDetail(queryData.value).then((res) => {
			if (res.code != 200) return
			formData.value = res.data
		})
	}

	const initFormView = () => {
		getForm()
	}

	// 获取附件信息
	const imgUrl = ref({})
	const getUrl = async (url) => {
		if (imgUrl.value[url]) return imgUrl.value[url]

		try {
			const res = await complaintApi.wechatDownload({
				mediaId: url
			})
			imgUrl.value[url] = `data:image/png;base64,${res.data.base64}`
			return imgUrl.value[url]
		} catch (e) {
			console.error('下载失败:', e)
			return ''
		}
	}

	const propsData = ref({})
	onLoad(async (options) => {
		if (options.complaintNo) {
			propsData.value = {
				...options
			}
			queryData.value.complaintNo = options.complaintNo
			initFormView()
		}
	})
	onReady(() => {})
</script>
<style lang='scss' scoped>
	.view-group {
		background-color: #fff;
	}

	.operate-box {
		position: fixed;
		z-index: 99;
		bottom: 50rpx;
	}

	.tar {
		:deep(.u-input) {
			text-align: right !important;
		}
	}
</style>